<template>
  <div>
    <!-- 模板解析时会自动读取count的value属性 -->
    <h2>count: {{count}}</h2>
    <h2>count2: {{count2}}</h2>
    <h2>count3: {{count3}}</h2>

    <button @click="update">更新</button>
  </div>
</template>

<script lang="ts">

import {
  ref,
  computed
} from 'vue'
export default {
  name: 'About',

  // 所有的响应式API和组合API都在此调用
  setup() {
    // console.log('setup', this)  // this是undefined, 不能通过this来更新数据
    // 创建一个ref响应式数据
    const count = ref(2)
    // console.log('count', count)

    // 定义计算属性 (getter)
    const count2 = computed(() => {   // getter
      console.log('count2...')
      return count.value * 2
    })

    // 定义计算属性 (getter & setter)
    const count3 = computed<number>({
      get () {
        console.log('count3 get()')
        return count.value * 3
      },

      set (value) {
        console.log('count3 set ', value)
      }
    })
    console.log('count3', count3)



    const update = () => {
      // count.value += 1
      count3.value += 1
    }

    return {  // 对象中的所有函数模板都可以直接访问
      count,
      count2,
      count3,
      update
    }
  }
  
}
</script>

<style scoped>

</style>
